<template>
  <div class="canvas-container">
    <canvas ref='canvasId'/>
    <h3>圆环进度</h3>
  </div>
</template>

<script>
export default {
  mounted(){
    this.draw()
  },
  methods:{
    draw(){
      //创建画布
      const canvasCon = document.querySelector('.canvas-container')
      const canvas = this.$refs["canvasId"]
      const canvasWidth = canvasCon.clientWidth
      const canvasHeight = canvasCon.clientWidth
      canvas.width = canvasWidth
      canvas.height = canvasHeight
      const ctx = canvas.getContext('2d')

      const x = canvasWidth*0.5
      const y = canvasWidth*0.5
      const r = canvasWidth * 0.3

      ctx.lineWidth = 8
      ctx.strokeStyle = "#cccccc"
      ctx.arc(x, y, r, 0, Math.PI*2, false);
      ctx.stroke()

      ctx.beginPath()
      
      // ctx.strokeStyle = 'green'
      var grd=ctx.createLinearGradient(0,0,canvasWidth,canvasWidth);
      grd.addColorStop(0,"red");
      grd.addColorStop("0.5","yellow");
      grd.addColorStop(1,"green");
      ctx.strokeStyle = grd
      ctx.lineCap="round";
      
      // 不对，因为是以canvas左上角为圆心旋转的
      // ctx.rotate(-90*(Math.PI/180)); 
      let end = (Math.PI*2)*0.66 - Math.PI/2
      ctx.arc(x, y, r, -Math.PI/2, end, false);
      ctx.stroke()

      // 绘制文字 阴影
      ctx.font = '20px Arial'
      ctx.textAlign="center";
      ctx.textBaseline="top";

      ctx.fillStyle = 'PaleGreen'
      ctx.shadowColor = 'black'
      ctx.shadowBlur = 3
      ctx.shadowOffsetX=2;
      ctx.shadowOffsetY=2;
      ctx.fillText("完成66%",x,y-15);
    }
  }
}
</script>

<style lang="scss" scoped>
</style>